<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.demo{
				width: 200px;
				height: 200px;
				background-color: pink;
				/* 文字水平居中 */
				text-align: center;
				/* 文字垂直居中  ： 设置行高 与 高度一样*/
				line-height: 200px;
				
				/* 圆角 */
				/* border-radius: 50%; */
				/* 边框 */
				/* border: 1px solid #000; */
			}
		</style>
	</head>
	<body>
		<!-- 
		 1、DOM : DOM就是操作页面的（数据）代码
		 2、DOM能干啥：
			- 获取标签
			- 操作标签的内容
			- 操作标签的属性
			- 操作标签的样式
			- 操作标签的事件
		 -->
		 <div class="demo">你点我试试</div>
		 <script> 
			// 在事件的处理程序中，使用this关键字，代表事件目标
			 var demo = document.querySelector(".demo")
			 demo.onclick = function(){
				 this.style.borderRadius = "50%"
				 this.style.border = "1px solid #000"
				 this.innerText = "我服了，别点我"
			 }
		 </script>
	</body>
</html>
